<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        欢迎你，{{ username }}
        <leftmenu :menu_number="2"></leftmenu>
      </div>
    </a-layout-sider>
    <a-layout>
      <headmenu></headmenu>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >
        <h2>申请工单</h2>

        <!-- <a-breadcrumb> -->
        <!-- <a-breadcrumb-item>我申请的工单</a-breadcrumb-item> -->
        <!-- <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item> -->
        <!-- <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item> -->
        <!-- <a-breadcrumb-item>An Application</a-breadcrumb-item> -->
        <!-- </a-breadcrumb> -->

        <a-breadcrumb>
          <a-breadcrumb-item>工单类型</a-breadcrumb-item>
          <a-breadcrumb-item
            ><a href="/showwork">查看工单</a></a-breadcrumb-item
          >
          <!-- <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item> -->
          <a-breadcrumb-item>添加工单</a-breadcrumb-item>
        </a-breadcrumb>

        <center>
          <h2>{{title}}</h2>
        </center>
        {{ fields_data }}

        <a-form-item
          :label="key == 'starttime' ? '请假日期' : key"
          v-bind="formlayout"
          v-for="(value, key) in fields_data"
          :key="key"
        >
          {{ starttime }} {{ endtime }}
          <a-form-item :label="fields_data[key]" v-if="key == 'starttime'">
            <a-date-picker @change="start" />
            <!-- <a-date-picker @change="end" /> -->
          </a-form-item>

          <a-form-item :label="fields_data[key]" v-else-if="key == 'endtime'">
            <!-- <a-date-picker @change="start" /> -->
            <a-date-picker @change="end" />
          </a-form-item>

          <a-upload
            v-else-if="key == 'img'"
            name="file"
            :multiple="true"
            action="http://127.0.0.1:8000/myapp/uploadfile/"
            :headers="headers"
            @change="handleChange"
            :remove="handleFileRemove"
          >
            <a-button> <a-icon type="upload" /> Click to Upload </a-button>
            <a-avatar
              :src="img_url + img_name"
              style="margin-left: 30px"
              v-show="img_name"
            />
          </a-upload>

          <a-input
            v-else
            v-model="fields_data[key]"
            :placeholder="'请输入' + key"
          ></a-input>
        </a-form-item>

        <a-form-item v-bind="buttonlayout">
          <a-button type="primary" @click="add_work">添加工单</a-button>
        </a-form-item>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
// import { img_url } from '../config'
import { get_work, post_w, delete_img } from "./axios_http/api";
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from "./headmenu.vue";
export default {
  data() {
    return {
      collapsed: false,
      img_name: "",
      img_url: this.img_url.baseurl,
      headers: {
        authorization: "authorization-text",
      },
      username: localStorage.getItem("username"),
      collapsed: false,
      wid: this.$route.query.wid,
      title: "",
      fileds: [],
      fields_data: {},
      starttime: null,
      endtime: null,

      // 表单样式
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },
      // 按钮样式
      buttonlayout: {
        // 按钮
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        },
      },
    };
  },
  components: {
    leftmenu: leftmenu,
    headmenu: headmenu,
  },
  methods: {
    handleFileRemove(file) {
      const name = file.name;
      console.log(name);
      this.img = "";
      delete_img({ data: { img_name: name } }).then((resp) => {
        console.log(resp);
      });
      // this.axios.delete('http://localhost:8000/myapp/upload/?name=' + name).then((res) => {
      //     console.log(this.img)
      // })
    },
    start(value, dateString) {
      this.fields_data["starttime"] = dateString;
    },
    end(value, dateString) {
      this.fields_data["endtime"] = dateString;
    },
    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(">>>", info.file, info.fileList);
        this.img_name = info.file.name;
        this.fields_data["img"] = this.img_url + this.img_name;
      }
      if (info.file.status === "done") {
        console.log(111);
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },

    add_work() {
      console.log(this.fields_data);
      post_w({
        fields_data: this.fields_data,
        wid: this.wid,
        img: this.img_name,
      }).then((resp) => {
        console.log(resp);
        this.$message.info(resp.data);
      });
    },
    get_work_data() {
      get_work(this.wid).then((resp) => {
        console.log(resp);
        this.title = resp.data.name;
        for (var i = 0; i < resp.data.custom.length; i++) {
          this.fields_data[resp.data.custom[i]] = "";
          console.log(this.fields_data)
        }
      });
    },
  },
  created() {
    //   this.add_work()
    this.get_work_data();
  },
};
</script>